<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
      }
      .chat {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: gray;
      }
      .chat_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: -webkit-gradient(
          linear,
          left top, left bottom,
          from(rgba(255, 255, 255, 0)),
          to(#19202c)
        );
        background-image: -webkit-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: -moz-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: -o-linear-gradient(
          top,
          rgba(255, 255, 255, 0),
          #19202c
        );
        background-image: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          #19202c
        );
      }
      .chat_time {
        font-size: 1rem;
        font-weight: bold;
        color: white;
        position: absolute;
        top: 2.6rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
      }
      .chat_hangup {
        width: 90%;
        position: absolute;
        bottom: 50px;
        left: 50%;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
        text-align: center;
        font-size: 0.32rem;
        line-height: 0.45rem;
        color: #b5b6b8;
      }
      .chat_hangup p {
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .chat_hangup_title {
        font-size: 0.6rem;
        line-height: 0.84rem;
        margin-bottom: 0.1rem;
      }
      .chat_hangup_close {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 0.61rem;
      }
      .chat_hangup_close img {
        width: 1.68rem;
        height: 1.68rem;
      }
    </style>
  </head>
  <body>
    <div class="chat" id="headImg">
      <div class="chat_bg"></div>
      <span class="chat_time" id="time">00:00</span>
      <div class="chat_hangup">
        <p class="chat_hangup_title" id="name">-</p>
        <p id="desc">-</p>
        <p class="chat_hangup_close">
          <img
            src="./hangup.svg"
            alt="Hangup"
            id="hangup"
          />
          <img src="./phone.svg" alt="Hangon" id="hangon" style="display: none;" />
          <img src="./sound-y.svg" alt="" id="soundBig" style="display: none;">
          <img src="./sound-n.svg" alt="" id="soundNormal">
        </p>
      </div>
    </div>
  </body>
  <script>
    var timeNum = 0
    !function (w) {
      var e = w.document,
        t = e.documentElement,
        i = 750,
        o = "orientationchange" in w ? "orientationchange" : "resize",
        a = function () {
          var cw = t.clientWidth || document.body.clientWidth;
          t.style.fontSize = cw / i * 100 + "px"
        };
      e.addEventListener && (w.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
      e.body.style.fontSize = '0.28rem';
    }(window);
    apiready = function () {
      var data = api.pageParam;
      document.getElementById('headImg').style.backgroundImage = 'url(' + data.photo + ')'
      document.getElementById('name').innerText = data.name
      document.getElementById('desc').innerText = data.desc
      if (data.isCall) {
        if (data.hangup) { // 是否挂断
          document.getElementById('hangup').style.display = 'inline-block'
          document.getElementById('hangon').style.display = 'none'
        } else {
          document.getElementById('hangup').style.display = 'none'
          document.getElementById('hangon').style.display = 'inline-block'
        }
        if (data.isVoiceBig) {
          document.getElementById('soundBig').style.display = 'inline-block'
          document.getElementById('soundNormal').style.display = 'none'
        } else {
          document.getElementById('soundBig').style.display = 'none'
          document.getElementById('soundNormal').style.display = 'inline-block'
        }
      } else {
        document.getElementById('hangup').style.display = 'inline-block'
        document.getElementById('hangon').style.display = 'inline-block'
        document.getElementById('soundBig').style.display = 'none'
        document.getElementById('soundNormal').style.display = 'none'
      }
      api.addEventListener({
        name: 'chatDataEvent',
      }, function (ret) {
        console.log('receipt form chatDataEvent:' + JSON.stringify(ret))
        if (ret) {
          if (ret.value.photo) {
            document.getElementById('headImg').style.backgroundImage = 'url(' + ret.value.photo + ')'
          }
          if (ret.value.name) {
            document.getElementById('name').innerText = ret.value.name
          }
          if (ret.value.desc) {
            document.getElementById('desc').innerText = ret.value.desc
          }
          if (typeof ret.value.hangup === 'boolean') {
            if (ret.value.hangup) { // 是否挂断
              document.getElementById('hangup').style.display = 'inline-block'
              document.getElementById('hangon').style.display = 'none'
              startChat()
            } else {
              document.getElementById('hangup').style.display = 'none'
              document.getElementById('hangon').style.display = 'inline-block'
            }
          }
          if (typeof ret.value.isVoiceBig === 'boolean') {
            if (ret.value.isVoiceBig) {
              document.getElementById('soundBig').style.display = 'inline-block'
              document.getElementById('soundNormal').style.display = 'none'
            } else {
              document.getElementById('soundBig').style.display = 'none'
              document.getElementById('soundNormal').style.display = 'inline-block'
            }
          } else if (typeof ret.value.hangup === 'boolean') {
            if (data.isVoiceBig) {
              document.getElementById('soundBig').style.display = 'inline-block'
              document.getElementById('soundNormal').style.display = 'none'
            } else {
              document.getElementById('soundBig').style.display = 'none'
              document.getElementById('soundNormal').style.display = 'inline-block'
            }
          }
        }
      })
      // 向window发送事件
      document.getElementById('hangup').onclick = function () {
        api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'hangup'
          }
        })
      }
      document.getElementById('hangon').onclick = function () {
        api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'hangon'
          }
        })
      }
      document.getElementById('soundBig').onclick = function () {
        api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'soundNormal'
          }
        })
      }
      document.getElementById('soundNormal').onclick = function () {
        api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'soundBig'
          }
        })
      }
    }
    function startChat() {
      timeNum = new Date().getTime()
      var timeEl = document.getElementById('time')
      setInterval(() => {
        timeEl.innerText = mmss(new Date().getTime() - timeNum)
      }, 1000);
    }


    function mmss(v) {
      if (!v) {
        return '00:00'
      }
      v = parseInt(v / 1000)
      var seconds = v % 60
      var minutes = parseInt(v / 60)
      if (seconds < 10) seconds = '0' + seconds
      if (minutes < 10) minutes = '0' + minutes
      return minutes + ':' + seconds
    }
  </script>
</html>
